<template>
    <div id="main">
    <el-header id="head" height="130px" style="background-color: #F2F2F2">
        <img id="logo" src="../assets/img/logo.webp" />
        <h1 style="margin-left: 50px;top: 30px;width: 350px;height: 50px;position: absolute">笔迹心理分析</h1>
        <el-button type="primary" plain round style="position:relative;margin-left: 780px;top: -40px;padding-inline: 60px" @click="register">注册</el-button>
        <el-button round style="position:relative;margin-left: 1260px;top: -80px;padding-inline: 60px" @click="login">登录</el-button>
    </el-header>
        <el-main>
            <h1 style="margin-left: 450px;font-family: 'STFangsong'">找寻笔迹中的性格，了解自己</h1>
            <h1 style="margin-left: 650px;font-family: 'STFangsong';">更靠近自己，更好的改变自己</h1>
        </el-main>
    </div>
</template>

<script>
    import logo from '@/assets/img/logo.webp'

    export default {
        name: "index",
        data(){
            return{
            logUrl: logo
            }

        },
        methods:{
            login(){
                this.$router.push('/Login')
            },
            register(){
                this.$router.push('/Register')
            }
        }
    }
</script>

<style scoped>
#main{
    background: url("../assets/img/index.jpg");
    height: 100%;
    width: 100%;
    background-size: 100%,100%;
    position: absolute;
}
    #head>*{
        display: inline-block;
    }
    #logo{
        margin-left: 155px;
        margin-top :23px;
        height:100px;
        width:120px
    }
</style>
